<template>
  <div>
    <component :is="currentComponent" />
    <button @click="switchComponent">Switch Component</button>
  </div>
</template>

<script>
import { ref } from "vue";
import ComponentA from "./ComponentA.vue";
import ComponentB from "./ComponentB.vue";
import ComponentC from "./ComponentC.vue";

export default {
  components: {
    ComponentA,
    ComponentB,
    ComponentC,
  },
  setup() {
    const currentComponent = ref("ComponentA");

    const switchComponent = () => {
      if (currentComponent.value === "ComponentA") {
        currentComponent.value = "ComponentB";
      } else if (currentComponent.value === "ComponentB") {
        currentComponent.value = "ComponentC";
      } else {
        currentComponent.value = "ComponentA";
      }
    };

    return {
      currentComponent,
      switchComponent,
    };
  },
};
</script>
